<template>
  <div>
    <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-menu-item index="2" v-for="item in packages.menuOptions" :key="item.key">
          <el-icon><icon-menu /></el-icon>
          <span>{{ item.label }}</span>
        </el-menu-item>
      </el-menu>
        <chart-item-box :menuOptions="packages.selectOptions"></chart-item-box>
        <!-- :menuOptions="packages.selectOptions" -->
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, reactive,defineProps } from 'vue';
import ChartItemBox from '../ChartItemBox/index.vue'
import { ConfigType } from '@/views/drag/package/index.d'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
let packages = reactive<{
  [T: string]: any
}>({
  // 侧边栏
  menuOptions: [],
  // 当前选择
  selectOptions: {},
  // 分类归档
  categorys: {
    all: []
  },
  categoryNames: {
    all: '所有'
  },
  // 分类归档数量
  categorysNum: 0,
  // 存储不同类别组件进来的选中值
  saveSelectOptions: {}
})
const props = defineProps({
  selectOptions: {
    type: Object,
    default: () => {}
  }
})
// 设置初始列表
const setSelectOptions = (categorys: any) => {
  for (const val in categorys) {
    packages.selectOptions = categorys[val]
    break
  }
}
const selectValue = ref<string>('all')
watch(
  // @ts-ignore
  () => props.selectOptions,
  (newData: { list: ConfigType[] }) => {
    packages.categorysNum = 0
    if (!newData) return
    newData.list.forEach((e: ConfigType) => {
      const value: ConfigType[] = (packages.categorys as any)[e.category]
      packages.categorys[e.category] = value && value.length ? [...value, e] : [e]
      packages.categoryNames[e.category] = e.categoryName
      packages.categorys['all'].push(e)
    })
    for (const val in packages.categorys) {
      packages.categorysNum += 1
      packages.menuOptions.push({
        key: val,
        label: packages.categoryNames[val]
      })
    }
    setSelectOptions(packages.categorys)
    // 默认选中处理
    selectValue.value = packages.menuOptions[0]['key']
  },
  {
    immediate: true
  }
)
</script>
<style lang="scss" scoped>
</style>